<template>
  <div class="shipment-table">
    <el-table v-loading="loading" :data="shipmentList" @selection-change="handleSelectionChange"
      @sort-change="handleSortChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column label="运单编号" align="left" prop="billNo" width="140" :show-overflow-tooltip="true"
        sortable="custom">
        <template slot-scope="scope">
          <el-link type="primary" @click="handleDetail(scope.row)">{{ scope.row.billNo }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="运单状态" align="center" prop="billStatus" width="100" sortable="custom">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.bill_status" :value="scope.row.billStatus" />
        </template>
      </el-table-column>
      <el-table-column label="偏差状态" align="center" prop="delayStatus" width="100" sortable="custom">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.deviation_status" :value="scope.row.delayStatus" />
        </template>
      </el-table-column>
      <el-table-column label="偏差小时" align="center" prop="delayHours" width="100" sortable="custom">
        <template slot-scope="scope">
          <span>{{ scope.row.delayHours || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="发货方" align="left" prop="senderName" width="120" :show-overflow-tooltip="true" />
      <el-table-column label="发货地址" align="left" prop="addressA" width="180" :show-overflow-tooltip="true" />
      <el-table-column label="收货方" align="left" prop="receiverName" width="120" :show-overflow-tooltip="true" />
      <el-table-column label="收货地址" align="left" prop="addressB" width="180" :show-overflow-tooltip="true" />
      <el-table-column label="收货联系人" align="center" prop="contactB" width="100" />
      <el-table-column label="联系电话" align="center" prop="phoneB" width="120" />
      <el-table-column label="货物名称" align="left" prop="goodsName" width="120" :show-overflow-tooltip="true"
        sortable="custom" />
      <el-table-column label="货物重量(kg)" align="center" prop="goodsWeight" width="100" />
      <el-table-column label="运输方式" align="center" prop="transportType" width="100" sortable="custom">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.transport_type" :value="scope.row.transportType" />
        </template>
      </el-table-column>
      <el-table-column label="预计发货时间" align="center" prop="sendTime" width="120">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.sendTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="预计到达时间" align="center" prop="arriveTime" width="120">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.arriveTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" align="center" prop="createTime" width="120" sortable="custom">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="80" fixed="right" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-view" @click="handleDetail(scope.row)"
            v-hasPermi="['logistics:shipment:query']">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { parseTime } from '@/utils/ruoyi'

export default {
  name: 'ShipmentTable',
  dicts: ['bill_status', 'transport_type', 'deviation_status'],
  props: {
    // 运单列表数据
    shipmentList: {
      type: Array,
      default: () => []
    },
    // 加载状态
    loading: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true
    }
  },
  methods: {
    // 解析时间
    parseTime,

    /** 多选框选中数据 */
    handleSelectionChange (selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
      this.$emit('selection-change', selection)
    },

    /** 详情按钮操作 */
    handleDetail (row) {
      this.$emit('detail', row)
    },

    /** 排序变化处理 */
    handleSortChange (sortInfo) {
      console.log('排序变化:', sortInfo)
      this.$emit('sort-change', sortInfo)
    }
  }
}
</script>

<style lang="scss" scoped>
.shipment-table {
  // 可以添加样式
}
</style>
